<%--
  Created by IntelliJ IDEA.
  User: 86176
  Date: 2020/4/24
  Time: 14:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jquery的ajax查询</title>
    <%--    引入jquery资源文件：必须在bootstrap资源文件之前引入--%>
    <script type="text/javascript" src="jquery-1.12.4/jquery-1.12.4.js"></script>
    <%--    引入bootstrap的资源文件--%>
    <script type="text/javascript" src="bootstrap-3.3.6-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.6-dist/css/bootstrap.css">
    <script type="text/javascript">
        // ajax请求处理函数
        function doAjaxQuery() {
            console.log("正准备执行ajax请求");

            // 获取form表单中的输入框控件的值
            var userName = $("#userName").val(); // 获取指定id的控件对象
            var userAddress = $("#userAddress").val();
            // jquery进行ajax的get请求
            $.ajax({
                type: "post", // 指明request请求类型为post请求
                url: "UserInfoAjaxQueryServlet", // 请求的url，form表单的action属性的值
                data: "userName="+ userName+"&userAddress="+userAddress,// 客户端浏览器发送给服务器端的数据
                dataType: "json", // 指明服务器发回的响应内容的格式 Json  【服务器发给ajax引擎的是json字符串，jquery将json字符串转换为json对象】
                success: function (data) { // ajax引擎执行成功之后的回调函数处理【符合条件：xmlhttp.readyState == 4 && xmlhttp.status == 200】
                    console.log("ajax查询结果：");
                    console.log(data);
                    // 局部刷新浏览器：使用js操作页面标签对象进行显示【dom操作】
                    // data 是 json对象
                    if (data && data.length > 0) {
                        // 拼接要显示的内容的html
                        var showDom = "";
                        // for循环遍历list集合【json数组】
                        for (var i = 0; i < data.length; i++) {
                            // 取出json数组中的当前遍历的元素对象：json对象【实体类】
                            var eachBean = data[i]; // data.get(i);??? // data[i]
                            // 将要显示的内容进行html内容拼接
                            showDom += "<tr>";

                            showDom += "<th scope=\"row\">";
                            showDom += (i + 1);
                            showDom += "</th>";

                            showDom += "<td>";
                            showDom += eachBean["userName"];
                            showDom += "</td>";

                            showDom += "<td>";
                            showDom += eachBean.userAddress;
                            showDom += "</td>";

                            showDom += "<td>";
                            showDom += eachBean.userTel;
                            showDom += "</td>";

                            showDom += "<td>";
                            showDom += eachBean.userRegDate;
                            showDom += "</td>";

                            showDom += "</tr>";
                        }
                        // 将要显示的html内容，赋值给tbody标签
                        $("#showData").html(showDom);
                    }

                }
            });
        }
    </script>
</head>
<body style="width: 100%">
<div style="width: 90%;margin: 10px auto;padding-top: 20px">
    <form class="form-horizontal" id="formQuery">
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入姓名">
            </div>

            <label class="col-sm-2 control-label">地址</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userAddress" name="userAddress" placeholder="请输入地址">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">联系电话</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userTel" name="userTel" placeholder="请输入联系电话">
            </div>

            <label class="col-sm-2 control-label">注册日期</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userRegDate" name="userRegDate" placeholder="请输入注册日期">-
                <input type="text" class="form-control" id="userRegDate2" name="userRegDate2" placeholder="请输入注册日期">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <%--                此处不需要提交form表单到服务器，所有不要使用submit类型的按钮--%>
                <button type="button" class="btn btn-default" onclick="doAjaxQuery()">查询</button>
            </div>
        </div>
    </form>
</div>

<div style="width: 90%;margin: 10px auto">
    <div>
        <table class="table table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>地址</th>
                <th>联系电话</th>
                <th>注册日期</th>
            </tr>
            </thead>

            <%--            ajax查询结果集显示的控件--%>
            <tbody id="showData">

            </tbody>
        </table>
    </div>

</div>

</body>
</html>